oa.view.rf.properFractionsAsCircleParts = {
/**
 * Render the structure of a ProperFractionsAsCircleParts
 * 
 * @author Linda Eckardt
 * @param {ArithmeticProblemList} ap  A List of arithmetic problems.
 */
render: function(ap) {
  var el = {};
  var rB = document.getElementById("renderBox");
  var apDivEl,
      rightPart,
      btnWrapper,
      frac;
  
  apDivEl = dom.createDiv("properFractionsAsCircleParts");
  apDivEl.setAttribute("data-nmrofops", ap.type.operators.length);
  rB.appendChild(apDivEl);
  
  // piechart
  el = dom.createDiv("piechart");
  apDivEl.appendChild( el);
  
  // rightPart
  rightPart = dom.createDiv("rest");
  
    // equality symbol
    el = dom.createDiv("equalitySymbol", "operatorFraction");
    el.innerHTML = "=";
    rightPart.appendChild(el);
    
    // fraction input
    frac = dom.createDiv(null, "fraction");
    
    // numerator
    el = dom.createNumInput("askedForNum", "operand", "numerator");
    el.addEventListener("input", oa.view.handleUserInputFractionChooser, false);
    frac.appendChild(el);
    
    // slash
    el = document.createElement("hr");
    el.setAttribute("class", "slash");
    frac.appendChild(el);
    
    // denominator
    el = dom.createNumInput("askedForDenom", "operand", "denominator");
    el.addEventListener("input", oa.view.handleUserInputFractionChooser, false);
    frac.appendChild(el);

    rightPart.appendChild(frac);
    
    // configure the submit/continue button
    el = dom.createButton("submitButton", "blue", "?");
    el.addEventListener("click", oa.view.handleFractionChooserSubmit, false); 
    
    btnWrapper = dom.createDiv(null, "moveButtonUp");
    btnWrapper.appendChild( el);
    rightPart.appendChild( btnWrapper);
  
  
  apDivEl.appendChild(rightPart);
  
  document.addEventListener("keypress", oa.view.handleKeyPressEvents, true);
  
},
/**
 * Fill an already rendered problem equation with new values for operands and
 * result
 * 
 * @author Linda Eckardt
 * @param {ArithmeticProblem} ap An arithmetic problem.
 */
fill: function(ap) {
  var xmlns = "http://www.w3.org/2000/svg";
  var radius = 140;
    width = 2 * radius,
    height = 2 * radius,
    padding = 10,
    emptyColor = "none";//"green",
    filledColor = "green";
  var cx = width / 2 +padding,
      cy = height / 2 +padding;
  var pieces = 0;
  var svg = document.createElementNS(xmlns, "svg");
  svg.setAttribute("version", "1.1");
  svg.setAttribute("width", width + 2*padding);
  svg.setAttribute("height", height + 2*padding);
  
  // circle pieces
  if (ap.result[0] === 1 && ap.result[1] == 1) {
    el = document.createElementNS(xmlns, "circle");
    el.setAttribute("cx", cx);
    el.setAttribute("cy", cy);
    el.setAttribute("r", radius);
    el.setAttribute("stroke", "black");
    el.setAttribute("stroke-width", "2");
    el.setAttribute("fill", filledColor);
    svg.appendChild(el);
  } else {
    // angle for each piece
    pieces = 360 / ap.result[1];
    for (var i = 0; i < ap.result[1]; i++){
      var fillColor;
      if (ap.result[0] >= i+1){
        fillColor = filledColor;
      } else {
        fillColor = emptyColor;
      }
      // path to center     + segment path
      var d = "M"+cx+","+cy + pieSegment(pieces * i, pieces, radius);
      el = document.createElementNS(xmlns, "path");
      el.setAttribute("d", d);
      el.setAttribute("stroke", "black");
      el.setAttribute("stroke-width", "1");
      el.setAttribute("fill", fillColor);
      svg.appendChild(el);  
    }
  }
  //delete previous piechart
  piechart = document.getElementById("piechart");
  while (piechart.firstChild)
    piechart.removeChild(piechart.firstChild);
  //add new one
  piechart.appendChild(svg);
  
  // clear inputs
  document.getElementById("askedForNum").value = "";
  document.getElementById("askedForDenom").value = ""; 
}
};

pieSegment = function(startDegree, degree, radius) {
  var sRad = startDegree * Math.PI / 180, // to radians
    rad = (startDegree + degree) * Math.PI / 180;
    sx = Math.sin(sRad) * radius, // startPos
    sy = -Math.cos(sRad) * radius,
    ex = Math.sin(rad) * radius - sx, // endPos (relative to startPos)
    ey = -Math.cos(rad) * radius - sy,
    l = degree % 360 > 180 ? 1 : 0;
    
  // path from center to startDeg to endDeg and back to center
  return " l"+sx+","+sy+" a"+radius+","+radius+" 0 "+l+",1 "+ex+","+ey+"z";
};

/**
 * Event handler for clicking the "Enter"/"Continue" button
 */
oa.view.handleFractionChooserSubmit = function(e) {
  var userInputFieldNum = document.getElementById("askedForNum"),
    userInputFieldDenom = document.getElementById("askedForDenom"),
    answer = [];
  
  // if already correct -> next problem
  if (e.target.innerHTML != "?") {  // click continue event
    userInputFieldNum.classList.remove("correct");
    userInputFieldDenom.classList.remove("correct");
    userInputFieldNum.classList.remove("given");
    userInputFieldDenom.classList.remove("given");
    e.target.innerHTML = "?";
    oa.ctrl.continueCurrentExercise();
  }
  else {
    if (userInputFieldNum.value === "" || userInputFieldDenom.value === "") {
      userInputFieldNum.value = oa.currentProblem.getCorrectAnswer()[0];
      userInputFieldDenom.value = oa.currentProblem.getCorrectAnswer()[1];
      userInputFieldNum.classList.add("given");
      userInputFieldDenom.classList.add("given");
      e.target.innerHTML = "►";
    } else {
      
      answer[0] = parseInt( userInputFieldNum.value);  
      answer[1] = parseInt( userInputFieldDenom.value);
      if (oa.ctrl.evaluateFraction( answer)) {
        userInputFieldNum.classList.add("correct");
        userInputFieldDenom.classList.add("correct");
        e.target.innerHTML = "►";
      }
      else {
        userInputFieldDenom.classList.add("false");
        userInputFieldNum.classList.add("false");
        userInputFieldNum.focus();
      }
    }
  }
};
/**
 * Event handler for reseting the input field's class value on new user input 
 */
oa.view.handleUserInputFractionChooser = function(e) {
  var userInputFieldNum = document.getElementById("askedForNum"),
  userInputFieldDenom = document.getElementById("askedForDenom");
  
  userInputFieldNum.classList.remove("correct");
  userInputFieldNum.classList.remove("false");
  userInputFieldDenom.classList.remove("correct");
  userInputFieldDenom.classList.remove("false");
};